<template>
	<div class="message_wrapper" v-loading="loading">
		<div class="headbox">
			<h2>{{ leaderName }}</h2>
		</div>
		<div class="content">
			<div class="person">
				<div class="img">
					<img :src="(!!currLeaderInfo.sysAttachment && currLeaderInfo.sysAttachment.httpUrl) || siteInfo.headPic.httpUrl" alt="" />
					<p>
						<span>{{ currLeaderInfo.userName }}</span>
						{{ currLeaderInfo.duty }}
					</p>
				</div>
				<el-button type="primary" @click="handleOpenMessage">我要留言</el-button>
			</div>
			<div class="listbox">
				<div class="title">
					<h3>所有留言</h3>
					<el-button type="text" :disabled="this.dataCount === 0" @click="handleSortChange">
						{{ isDesc ? '正序' : '倒序' }}
						<i :class="isDesc ? 'el-icon-caret-bottom' : 'el-icon-caret-top'"></i>
					</el-button>
				</div>
				<div class="list">
					<template v-if="!isFirst && letterList.length === 0">
						<el-empty description="暂无信件"></el-empty>
					</template>
					<template v-else>
						<dl v-for="(item, index) in letterList" :key="index" :id="item.id">
							<dt><el-avatar :size="56" :src="defaultAvatar"></el-avatar></dt>
							<dd class="cont">
								<h4>{{ item.fromName || '匿名人员' }}</h4>
								<div class="cnt" v-html="$cleanStyle(item.content)"></div>
								<span>{{ $moment(item.createTime).format('YYYY-MM-DD') }}</span>
							</dd>
							<dd class="reply" v-if="!!item.reply && item.reply.length > 0">
								<p v-for="(reply, ind) in item.reply" :key="ind"><font color="#f60">{{ reply.userName }}回复：</font>{{ reply.content }}</p>
							</dd>
						</dl>
					</template>
				</div>
				<sw-pagination :total="dataCount" :page.sync="listQuery.page" :limit.sync="listQuery.limit" notice="留言" @change="getLeaderLetterData"></sw-pagination>
			</div>
		</div>
		<el-dialog width="992px" :title="leaderName" :visible.sync="sendLetterDialog" :close-on-click-modal="false" append-to-body>
			<template slot="title"></template>
			<el-form :model="messageForm" :rules="messageRule" ref="messageForm" label-width="80px" class="message_form_dialog">
				<el-form-item label="您的姓名" prop="fromName">
					<el-input type="text" v-model="messageForm.fromName" placeholder="输入姓名"></el-input>
				</el-form-item>
				<el-form-item label="留言内容" prop="content"><sw-ueditor class="message_content" v-model="messageForm.content"></sw-ueditor></el-form-item>
			</el-form>
			<template slot="footer">
				<el-button size="medium" @click="handleResetMessage">取消</el-button>
				<el-button size="medium" type="primary" @click="handleSubmitMessage" :loading="sendLoading">确定</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script>
import swUeditor from './ueditor';
import { mapGetters } from 'vuex';
import { getUserInfoByEducation } from '@/api/system/user';
import { getLeaderMailData, postSendLeaderMail } from '@/api/web/leadMail';
import { leadMailReplyOpenApiQuery } from '@/api/web/leadMailReply';
export default {
	components: { swUeditor },
	data() {
		return {
			loading: false,
			defaultAvatar: require('@/assets/img/defaultAvatar.png'),
			isDesc: true,
			dataCount: 0,
			listQuery: {
				page: 1,
				limit: 10
			},
			letterList: [],
			sendLetterDialog: false,
			messageForm: {},
			messageRule: {
				content: { required: true, message: '请输入留言内容', trigger: 'blur' }
			},
			currLeaderInfo: {},
			sendLoading: false,
			isFirst: true,
			reply: {}
		};
	},
	computed: {
		...mapGetters(['siteInfo']),
		leaderType() {
			return this.$route.query.person;
		},
		leaderName() {
			switch (this.leaderType) {
				case '1':
					return '主任信箱';
					break;
				case '2':
					return '政委信箱';
					break;
				case '3':
					return '纪委信箱';
					break;
				default:
					return '信箱';
					break;
			}
		}
	},
	mounted() {
		this.loading = true;
		this.initializePage();
	},
	methods: {
		//页面初始化
		async initializePage() {
			let userInfo = await this.getMailboxUser().then((res) => res);
			console.log(userInfo);
			if (!userInfo) {
				this.$message.warning(`${this.leaderName}还未配置，请联系管理员配置${this.leaderName}`);
				this.loading = false;
				return false;
			}
			this.currLeaderInfo = this.$getAssignAttr(userInfo, ['id', 'userName', 'duty', 'sysAttachment']);
			await this.getLeaderLetterData().then((res) => res);
			this.loading = false;
		},

		//获取信箱用户信息
		async getMailboxUser() {
			let result = await getUserInfoByEducation({ education: this.leaderType }).then((res) => res.data);
			if (result.code === '0') {
				return !result.data ? {} : result.data[0];
			}
		},

		//获取领导信件信息
		async getLeaderLetterData() {
			let params = { ...this.listQuery, toPerson: this.leaderType, sort: this.isDesc ? 'createTimeDesc' : 'createTimeAsc', status: '1' };
			let result = await getLeaderMailData(params).then((res) => res.data);
			this.isFirst = false;
			if (result.code === '0') {
				this.dataCount = parseInt(result.count);
				this.letterList = !result.data ? [] : [...result.data];
				this.letterList.forEach((item) => {
					leadMailReplyOpenApiQuery({ leadMailId: item.id, page: 1, limit: 99 }).then((res) => {
						if (res.data.code == 0) {
							item.reply = res.data.data;
							this.letterList.reverse();
							if (res.data.length > 0) {
								this.reply[res.data[0].leadMailId] = res.data;
							}
						}
					});
				});
			}
		},

		async handleSortChange() {
			this.isDesc = !this.isDesc;
			this.loading = true;
			this.listQuery.page = 1;
			await this.getLeaderLetterData();
			this.loading = false;
		},

		//点击我要留言
		handleOpenMessage() {
			this.sendLetterDialog = true;
		},

		//提交留言
		handleSubmitMessage() {
			this.$refs['messageForm'].validate((valid) => {
				if (!valid) return false;
				this.sendLoading = true;
				this.requestSendMessage();
			});
		},

		//添加留言请求
		async requestSendMessage() {
			let params = { ...this.messageForm, toPerson: this.leaderType };
			let result = await postSendLeaderMail(params).then((res) => res.data);
			this.sendLoading = false;
			if (result.code === '0') {
				this.sendLetterDialog = false;
				this.$refs['messageForm'].resetFields();
				this.$message.success('信件发送成功！');
			}
		},

		//重置留言表单
		handleResetMessage() {
			this.$refs['messageForm'].resetFields();
			this.sendLetterDialog = false;
		}
	}
};
</script>

<style lang="scss" scoped>
.message_wrapper {
	display: flex;
	flex-direction: column;
	height: 100%;
	.headbox {
		display: flex;
		align-items: center;
		padding: 0 15px;
		height: 72px;
		background: url('../../assets/img/bg_headbox.png') no-repeat center;
		border: solid 1px #f4f4f4;
		h2 {
			font-size: 24px;
			line-height: 66px;
			font-weight: bold;
			font-family: 'simsun';
			color: #357c65;
			border-bottom: solid 3px #357c65;
			padding-top: 3px;
		}
	}
	.content {
		flex: 1;
		display: flex;
		margin-top: 24px;
		padding-bottom: 64px;
	}
	.person {
		width: 290px;
		flex-shrink: 0;
		margin-right: 40px;
		.img {
			padding: 24px 24px 0;
			border: solid 1px #ebedee;
			margin-bottom: 16px;
			img {
				display: block;
				width: 242px;
				height: 338px;
				object-fit: cover;
			}
			p {
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 16px;
				padding: 15px 0;
				color: rgba(0, 0, 0, 0.56);

				span {
					font-size: 20px;
					font-weight: bold;
					color: rgba(0, 0, 0, 0.9);
					margin-right: 10px;
				}
			}
		}
		.el-button--primary {
			width: 100%;
			height: 48px;
			border-color: #357c65;
			background-color: #357c65;
		}
	}
	.listbox {
		display: flex;
		flex-direction: column;
		flex: 1;
		overflow: hidden;
	}
	.title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-shrink: 0;
		padding-bottom: 15px;
		border-bottom: solid 1px rgba(0, 0, 0, 0.05);
		h3 {
			color: rgba(0, 0, 0, 0.86);
		}
		.el-button--text {
			color: rgba(0, 0, 0, 0.4);
		}
	}
	.list {
		flex: 1;
		padding-bottom: 20px;
		dl {
			// display: flex;
			align-items: flex-start;
			padding-top: 24px;
			clear: both;
		}
		dt {
			width: 56px;
			float: left;
			margin-right: 24px;
		}
		dd {
			flex: 1;
			overflow: hidden;
			border-bottom: solid 1px rgba(0, 0, 0, 0.05);
			width: calc(100% - 80px);
			float: right;
			h4 {
				font-size: 18px;
				margin-bottom: 10px;
			}

			.cnt {
				font-size: 16px;
				line-height: 1.5;
				color: rgba(0, 0, 0, 0.5);
			}

			span {
				display: block;
				margin-top: 10px;
				color: rgba(0, 0, 0, 0.3);
			}
			&.cont {
				padding-bottom: 16px;
			}
			&.reply {
				padding: 10px 0;
				line-height: 28px;
				color: #666;
				p {
					padding: 6px 0;
				}
			}
		}

		dl:last-child {
			dd.reply {
				border-bottom: none;
			}
		}
	}
}

.message_form_dialog ::v-deep {
	width: 100%;
	padding: 20px 20px 0;

	.el-textarea__inner {
		resize: none;
		font-family: 'Microsoft Yahei';
	}

	.message_content {
		position: relative;
		line-height: normal;
		margin-top: 5px;
		z-index: 9999999;
	}
}
</style>
